"use client";

import { useEffect, useState } from 'react';
import Script from 'next/script';
import { useTheme } from 'next-themes';
import FlipClock from './components/FlipClock';

export default function Home() {
  const { theme, setTheme } = useTheme();
  const [isFullscreen, setIsFullscreen] = useState(false);
  const [hours, setHours] = useState(0);
  const [minutes, setMinutes] = useState(0);
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      const now = new Date();
      setHours(now.getHours());
      setMinutes(now.getMinutes());
      setSeconds(now.getSeconds());
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  useEffect(() => {
    const handleFullscreenChange = () => {
      setIsFullscreen(document.fullscreenElement !== null);
    };

    document.addEventListener('fullscreenchange', handleFullscreenChange);
    return () => {
      document.removeEventListener('fullscreenchange', handleFullscreenChange);
    };
  }, []);

  return (
    <div className="min-h-screen">
      {/* Google Analytics */}
      <Script
        strategy="afterInteractive"
        src="https://www.googletagmanager.com/gtag/js?id=G-SX98B17QP2"
      />
      <Script
        id="google-analytics"
        strategy="afterInteractive"
      >
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-SX98B17QP2');
        `}
      </Script>

      {/* 主要时钟区域 */}
      <div className="clock-container">
        <div className="clock">
          <FlipClock value={hours} isHour />
          <div className="divider">:</div>
          <FlipClock value={minutes} />
          <div className="divider">:</div>
          <FlipClock value={seconds} />
        </div>

        {/* 控制按钮 */}
        <div className="controls">
          <button
            onClick={() => {
              if (!isFullscreen) {
                document.documentElement.requestFullscreen();
              } else {
                document.exitFullscreen();
              }
            }}
            className="control-btn"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
            </svg>
          </button>
          <button
            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
            className="control-btn"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M12 2v2m0 16v2M4 12H2m20 0h-2m-2.05-6.95l-1.41 1.41M5.46 5.46l-1.41-1.41m0 15.9l1.41-1.41m12.72 0l1.41 1.41M12 6a6 6 0 0 0 0 12 6 6 0 0 0 0-12z" />
            </svg>
          </button>
        </div>

        {/* 日期显示 */}
        <div className="date-container">
          <div className="solar-date"></div>
          <div className="lunar-date"></div>
        </div>
      </div>

      {/* SEO内容区域 - 仅在非全屏模式下显示 */}
      {!isFullscreen && (
        <div className="seo-content">
          {/* 页面标题区域 */}
          <header className="page-header">
            <h1>Free Online Flip Clock - Digital Flip Clock Tool</h1>
            <p className="subtitle">Experience the perfect blend of functionality and aesthetics with our free online flip clock</p>
          </header>

          {/* 功能特性 */}
          <section className="features">
            <h2>Flip Clock Features</h2>
            <div className="feature-grid">
              <div className="feature-item">
                <h3>Aesthetic Flip Clock Design</h3>
                <p>Our beautiful digital flip clock features smooth animation effects that mimic the classic analog flip clock experience. Perfect for study sessions, presentations, and creating an aesthetic workspace atmosphere.</p>
              </div>
              <div className="feature-item">
                <h3>Full Screen Flip Clock</h3>
                <p>Toggle fullscreen mode for the ultimate flip clock experience on your desktop or laptop. The full screen flip clock provides maximum visibility and creates an immersive timing environment.</p>
              </div>
              <div className="feature-item">
                <h3>Flip Clock with Seconds</h3>
                <p>Precise timekeeping with hours, minutes, and seconds display in classic flip clock style. Our flip clock with seconds ensures accurate timing for all your productivity and presentation needs.</p>
              </div>
              <div className="feature-item">
                <h3>Multiple Theme Options</h3>
                <p>Choose from various aesthetic themes including zen flip clock, retro flip clock, and modern designs. Each theme transforms your online flip clock into a personalized timing tool.</p>
              </div>
            </div>
          </section>

          {/* 主题介绍 */}
          <section className="themes">
            <h2>Aesthetic Flip Clock Themes</h2>
            <p>Our online flip clock supports multiple beautiful themes to match any environment or mood. The zen flip clock theme provides a calming, minimalist experience perfect for meditation and focus sessions. The retro flip clock style brings nostalgic charm with vintage-inspired colors and effects.</p>
          </section>

          {/* 使用说明 */}
          <section className="usage">
            <h2>How to Use This Online Flip Clock</h2>
            <ol>
              <li><strong>Open the flip clock</strong> - Simply load this page in your browser to start using the free online flip clock immediately</li>
              <li><strong>Choose your theme</strong> - Click the theme button to select from aesthetic flip clock designs including zen, retro, and modern styles</li>
              <li><strong>Enable fullscreen</strong> - Use the fullscreen button to maximize your flip clock display for presentations or desktop decoration</li>
              <li><strong>Enjoy the experience</strong> - Watch the smooth flip animations and precise timekeeping of your digital flip clock</li>
            </ol>
          </section>

          {/* 关于部分 */}
          <section className="about">
            <h2>About Our Digital Flip Clock</h2>
            <p>This free online flip clock combines the nostalgic appeal of traditional flip clocks with modern digital precision. Whether you need a fullscreen flip clock for presentations, an aesthetic flip clock for your workspace, or a reliable timing tool for productivity sessions, our digital flip clock delivers exceptional performance.</p>
          </section>

          {/* 常见问题 */}
          <section className="faq">
            <h3>Frequently Asked Questions</h3>
            <div className="faq-item">
              <h4>Is this flip clock free to use?</h4>
              <p>Yes, our online flip clock is completely free to use. No downloads, registrations, or payments required. Simply open the page and start using your digital flip clock immediately.</p>
            </div>
          </section>
        </div>
      )}

      {/* 引入农历插件 */}
      <Script
        src="https://cdn.jsdelivr.net/npm/lunar-javascript/lunar.js"
        strategy="lazyOnload"
      />
    </div>
  );
}